<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="javascript:void(0);">货物类型</a></el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片模版 -->
        <el-card class="box-card">
            <h2>货物类型</h2>
            <!-- 表格模版，渲染用户信息 -->
            <el-table :data="FixList" stripe style="width: 100%" border :header-cell-style="{background:'#eef1f6',color:'#606266'}">
                <el-table-column prop="name" label="名称">
                </el-table-column>
                <el-table-column prop="genre_id" label="设备类型">
                </el-table-column>
                <el-table-column prop="desc" label="描述">
                </el-table-column>
                <el-table-column prop="create_time" label="创建时间">
                </el-table-column>
                <el-table-column prop="update_time" label="更新时间">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <!-- 编辑 -->
                        <el-tooltip class="item" effect="dark" content="编辑" placement="top" :enterable="false" v-if="scope.row.auditing != 2">
                            <el-button type="primary" size="mini" @click="UpdateUser(scope.$index, scope.row)">
                                <i class="el-icon-edit"></i>
                            </el-button>
                        </el-tooltip>
                        <!-- 删除 -->
                        <el-tooltip class="item" effect="dark" content="删除" placement="top" :enterable="false">
                            <el-button size="mini" type="danger" @click="DeleteUser(scope.$index, scope.row)">
                                <i class="el-icon-delete"></i>
                            </el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <template>
                <div class="block" style="text-align:center;margin-top:20px;">
                    <el-pagination @size-change="GetUserPag" @current-change="GetUserPag" :current-page.sync="page" :page-sizes.sync="pagesizes" :page-size.sync="size" layout="total, sizes, prev, pager, next, jumper" :total.sync="total">
                    </el-pagination>
                </div>
            </template>
        </el-card>
        <!-- 编辑用户信息弹窗 -->
        <!-- <el-dialog :visible.sync="UpdateUserDialog" width="20%" center> -->
        <!-- 注册子组件 -->
        <!-- <UpdateUser :UserForm='UserForm' :PowerList='PowerList' />
        </el-dialog> -->

    </div>
</template>

<script>
import UpdateUser from '../subunit/UpdateUser'
import moment from 'moment'
import { genre_list_get, fix_info_get, user_info_delete } from '../axios_api/api'
export default {
    data() {
        return {
            // 分页
            pagesizes: [10, 20, 50, 100],
            size: 10,
            total: 0,
            page: 1,
            // 设备类型
            GenreList: [],
            // 货物类型
            FixList: [],
            // 弹窗
            UpdateUserDialog: false,
        }
    },
    // components: {
    //     UpdateTag,
    // },
    mounted() {
        this.GenreInfo();
    },
    methods: {
        // 编辑
        UpdateUser(index, data) {

        },
        // 删除
        DeleteUser(index, data) {

        },
        // 分页器
        GetUserPag() {
            this.FixInfo();
        },
        // 获取货物类型信息
        FixInfo() {
            let params = { page: this.page, size: this.size }
            fix_info_get(params).then(resp => {
                if (resp.code === 200) {
                    // 遍历，将设备id转换成设备名
                    for (let i = 0; i < resp.fixinfo.length; i++) {
                        for (let j = 0; j < this.GenreList.length; j++) {
                            if (resp.fixinfo[i].genre_id === this.GenreList[j].id) resp.fixinfo[i].genre_id = this.GenreList[j].name
                        }
                        // 将时间处理为可读时间
                        resp.fixinfo[i].create_time = moment(resp.fixinfo[i].create_time).format('YYYY-MM-DD HH:mm:ss')
                        resp.fixinfo[i].update_time = moment(resp.fixinfo[i].update_time).format('YYYY-MM-DD HH:mm:ss')
                        if (!resp.fixinfo[i].desc) resp.fixinfo[i].desc = '无'
                        if (resp.fixinfo[i].update_time === 'Invalid date') resp.fixinfo[i].update_time = '暂无'
                    }
                    this.FixList = resp.fixinfo
                    this.total = resp.total
                    console.log(resp)
                }
            })
        },
        // 获取用户列表
        GenreInfo() {
            genre_list_get().then(resp => {
                if (resp.code === 200) {
                    this.GenreList = resp.genrelist
                    this.FixInfo();
                    console.log(this.GenreList)
                }
            })
        },
    },
}
</script>

<style>
</style>